<script setup lang="ts">
import { watch } from 'vue';
import { useScrollLock } from '@vueuse/core';

const isVisible = defineModel({ default: false });

// 锁定滚动
const isLocked = useScrollLock(document.body);
watch(
  isVisible,
  val => {
    if (val) {
      isLocked.value = true;
    } else {
      isLocked.value = false;
    }
  },
  { immediate: true }
);
defineOptions({ name: 'MPopup' });
</script>

<template>
  <Teleport to="body">
    <!-- 蒙板 -->
    <Transition name="fade">
      <div
        v-if="isVisible"
        class="fixed top-0 left-0 z-40 h-screen w-screen bg-zinc-900/80"
        @click="isVisible = false"
      />
    </Transition>
    <!-- 内容 -->
    <Transition name="pop-down-up">
      <div
        v-if="isVisible"
        v-bind="$attrs"
        class="fixed bottom-0 z-50 w-screen bg-white dark:bg-zinc-800"
      >
        <slot />
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped lang="css">
/* fade 动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

/*准备进入, 离开完成*/
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* pop-down-up 动画 */
.pop-down-up-enter-active,
.pop-down-up-leave-active {
  transition: all 0.3s;
}

/*准备进入, 离开完成*/
.pop-down-up-enter-from,
.pop-down-up-leave-to {
  transform: translateY(100%);
}
</style>
